@import "../varibles";
@import "../mixins/mixin";

.vue-message{
	z-index:10001;
	background-color: $message_bg_col;
	color:$message_text_col;
}

.vue-message-header{
	position:relative;
	padding:$message_padding;
	text-align:center;
	font-weight:bold;
}

.vue-message-body{
	position:relative;
	padding:0 $message_padding $message_padding;
}


.vue-message-footer{
	display: table;
	width:100%;
	table-layout:fixed;
}

.vue-message-btn{
    display: table-cell;
    width: 100%;
    padding: 10px;
    text-align: center;
	border: 1px solid $message_border_col;
	border-right-style:none;
	border-bottom-style:none;
    background-color: $message_btn_bg;
	&:first-child{
		border-left-style:none;
	}
    &:hover,&:link,&:focus,&:active{
    	background-color: darken($message_btn_bg,5%);
    }
}

.vue-message-top{
	position: fixed;
	top:0;
	left:0;
	width:100%;
}


.vue-message-center{
	position:fixed;
	top:42%;
	left:5%;
	width:90%;
}


.vue-message-bottom{
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
}
